<template>
    <div>
        <base-list ref="job" :condition="condition" :showLine="false" :isShowClose="true" :datas.sync="job"
                   :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="计划编号">
                            <el-input type="text" v-model.trim="condition.search_LIKE_planNo" clearable></el-input>
                            <!-- <el-select v-model="condition['search_LIKE_planNo']" placeholder="请选择" clearable>
                              <el-option v-for="[key, val] in _dictBusinessModel" :key="key" :label="val"
                                         :value="key"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱号">
                            <el-input type="text" v-model.trim="condition.search_LIKE_containerNo" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="作业状态">
                            <el-select v-model="condition['search_EQ_jobStatus']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictJobStatus" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="货名">
                            <el-input type="text" v-model.trim="condition.search_LIKE_cargoName" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="预计作业时间">
                            <date-slot :startDate.sync="condition.search_GTE_dateTime"
                                        dateType="yyyy-MM-dd"
                                       :endDate.sync="condition.search_LTE_dateTime"></date-slot>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-100">查 询</el-button>
                        <el-button @click="handleExport">导出Excel</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="list">
                <el-row type="flex" justify="end">
                    <el-col :span="16" style="display: flex;justify-content: space-between">
                        <title-point color="#50B155">
                            <div slot="content">
                                进场 :
                                <span style="font-size: 16px">{{ form.JC }} 箱</span>
                            </div>
                        </title-point>
                        <title-point color="#449DFF">
                            <div slot="content">
                                内转出场 :
                                <span style="font-size: 16px">{{ form.NZCC }} 箱</span></div>
                        </title-point>
                        <title-point color="#30C8CA">
                            <div slot="content">
                                内转入场 :
                                <span style="font-size: 16px">{{ form.NZRC }} 箱</span></div>
                        </title-point>
                        <title-point color="#FFCC00">
                            <div slot="content">
                                拆箱 :
                                <span style="font-size: 16px">{{ form.CX }}  箱</span>
                            </div>
                        </title-point>
                        <title-point color="#B798F5">
                            <div slot="content">
                                提箱 :
                                <span style="font-size: 16px">{{ form.TX }}  箱</span>
                            </div>
                        </title-point>
                    </el-col>
                </el-row>
                <el-table :data="job" border stripe max-height="500" class="mt-10 ">
                    <el-table-column fixed="left" prop="planNo" label="计划编号"  min-width="160"></el-table-column>
                    <el-table-column prop="planJobDate" label="计划作业日期"  min-width="130"></el-table-column>
                    <el-table-column prop="planType" label="计划类型"  min-width="120">
                        <template slot-scope="scope">
                            {{ scope.row.planType | _filterPlanType }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="containerNo" label="箱号"  min-width="120"></el-table-column>
                    <!--<el-table-column prop="containerNum" label="箱数"  min-width="120"></el-table-column>-->
                    <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
                    <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
                    <el-table-column prop="ifHeavy" label="空重"  min-width="80">
                        <template slot-scope="scope">
                            {{ scope.row.ifHeavy | _filterIfHeavyType }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="tradeType" label="内外贸"  min-width="80">
                        <template slot-scope="scope">
                            {{ scope.row.tradeType | _filterTradeType }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="ownerName" label="箱主"  min-width="120"></el-table-column>
                    <el-table-column prop="cargoName" label="货名"  min-width="120"></el-table-column>
                    <el-table-column prop="cargoWeight" label="货重"  min-width="120"></el-table-column>
                    <el-table-column prop="cargoOwnerName" label="货主"  min-width="120"></el-table-column>
                    <el-table-column prop="jobStatus" label="作业状态"  min-width="120">
                        <template slot-scope="scope">
                            {{ scope.row.jobStatus | _filterJobStatus }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="operateDateTime" label="作业时间"  min-width="120"></el-table-column>
                    <el-table-column prop="entrustOrgName" label="委托单位"  min-width="120"></el-table-column>
                    <el-table-column prop="consignee" label="收货人"  min-width="120"></el-table-column>
                    <el-table-column prop="shipper" label="发货人"  min-width="120"></el-table-column>
                </el-table>
            </div>

        </base-list>
    </div>
</template>
<script>
    import { getPageList,containerJobPageListCount } from "@/api/containerJob/containerJob";
    import dateSlot from '@/components/date/dateSlot'
    import { getLocalTime, mGetDate } from "@/utils/dateFormat";
    import titlePoint from '../common/title-point'
    import { newExportExcel } from "@/utils/newExport";
    import {ifHeavyType,tradeType,jobStatus} from "../../../assets/dict";
    export default {
        name: '作业列表',
        components: { dateSlot,titlePoint },
        data() {
            return {
                condition: {
                    search_EQ_jobStatus: '',
                    search_GTE_dateTime: '',
                    search_LTE_dateTime: '',
                },                      // 查询条件
                job: [],                      // table数组
                pageSearch: getPageList,          // 分页查询api接口
                form:{}
            }
        },
        mounted() {
            let query = this.$route.query
            if (query) {
                this.condition['search_EQ_jobStatus'] = query.status
                this.condition['search_GTE_dateTime'] = query.date
                this.condition['search_LTE_dateTime'] = query.date
                if (query.dateType === 'month') {
                    let toMonth = mGetDate(new Date().getFullYear(), new Date().getMonth() + 1)
                    this.condition.search_GTE_dateTime = query.date
                    this.condition.search_LTE_dateTime = query.date.substr(0, 7) + '-' + toMonth
                }
            }

            this.loadData()
        },
        activated() {
            let query = this.$route.query
            if (query) {
                this.condition['search_EQ_jobStatus'] = query.status
                this.condition['search_GTE_dateTime'] = query.date
                this.condition['search_LTE_dateTime'] = query.date
                if (query.dateType === 'month') {
                    let toMonth = mGetDate(new Date().getFullYear(), new Date().getMonth() + 1)
                    this.condition.search_GTE_dateTime = query.date
                    this.condition.search_LTE_dateTime = query.date.substr(0, 7) + '-' + toMonth
                }
            }
            // this.loadData()
        },
        methods: {
            loadData() {
                this.$refs.job.loadData()
                let params=this.$assist.copySearchConditions(this.condition)
                containerJobPageListCount(params).then(res=>{
                    console.log(res)
                    this.form=res.data
                })
            },
            handleExport(){
                let map = new Map();
                map.set('planNo','计划编号')
                map.set('planJobDate','计划作业日期')
                map.set('planType','计划类型')
                map.set('containerNo','箱号')
                map.set('containerNum','箱数')
                map.set('containerType','箱型')
                map.set('containerSize','尺寸')
                map.set('ifHeavy','空重')
                map.set('tradeType','内外贸')
                map.set('ownerName','箱主')
                map.set('cargoName','货名')
                map.set('cargoWeight','货重')
                map.set('cargoOwnerName','货主')
                map.set('jobStatus','作业状态')
                map.set('operateDateTime','作业时间')
                map.set('entrustOrgName','委托单位')
                map.set('consignee','收货人')
                map.set('shipper','发货人')
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayLength=99999
                getPageList(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "ifHeavy") {
                                record[key] = ifHeavyType.get(record[key]);
                            }
                            if (key === "tradeType") {
                                record[key] = tradeType.get(record[key]);
                            }
                            if (key === "jobStatus") {
                                record[key] = jobStatus.get(record[key]);
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("作业列表", exportRecords);
                })
            }
        }
    }
</script>
<style scoped lang="sass">

</style>
